<template>
  <div class="divBox">
    <el-card class="box-card">
      
      <el-form :model="obj" inline label-width="100px">
        <el-form-item label="关联小程序">
          <el-select v-model="obj.subAppId" clearable placeholder="请选择商家">
            <el-option
              v-for="item in constants.wxList"
              :key="item.appid"
              :label="item.name"
              :value="item.appid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="obj.name"> </el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="obj.description"> </el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select
            v-model="obj.missionType"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="kok in constants.missionTypeArr"
              :key="kok.value"
              :label="kok.label"
              :value="kok.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          @click="addJiangli"
          >添加奖励</el-button
        >
            <el-form-item label="奖励列表" v-for="(ele, index) in obj.awards" :key="index">
              <div style="display: flex;">
                <el-select
                  v-model="ele.type"
                  clearable
                  placeholder="请选择对象"
                  >
                  <el-option
                  :label="'单方'"
                  :value="1"
                  >
                  </el-option>
                  <el-option
                  :label="'双方'"
                    :value="2"
                  >
                  </el-option>
                </el-select>
                <el-input type="number" style="width: 100px;margin-left: 10px" placeholder="奖励抽奖次数" v-model.number="ele.drawCount"> </el-input>
                <el-input type="number" style="width: 100px;margin-left: 10px" placeholder="奖励积分" v-model.number="ele.integral"> </el-input>
                <el-input type="number" style="width: 100px;margin-left: 10px" placeholder="任务浏览量" v-model.number="ele.view"> </el-input>
                <el-button  type="danger" @click="delExtra(ele, index)">删除</el-button>
              </div>
            </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button type="success" @click="submitSign">提交</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { jiangliSave } from "@/api/jiangli";
export default {
  name: "JiangliSet",
  data() {
    return {
      constants: this.$constants,
      obj: {
        description: "",
        subAppId: "",
        name: "",
        missionType: null,
        awards: [],
      },
      couponList: []
    };
  },
  mounted() {},
  methods: {
    addJiangli() {
      this.obj.awards.push({
        "couponId": null,
        "drawCount": null,
        "integral": null,
        "type": null,
        "view": null
      });
    },
    delExtra(obj, index) {
      obj.awards.splice(index, 1);
    },
    async submitSign() {
      await jiangliSave(this.obj);
      this.obj = {
        description: "",
        subAppId: "",
        name: "",
        missionType: null,
        awards: [],
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.sub {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.question {
  width: 80%;
  .line {
    text-align: center;
  }
  .red {
    color: #ff0000;
  }
}
.bghui {
  background: #fafafa;
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  .deleanswer {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #fff;
    background: #ff0000;
    padding-left: 10px;
    border-radius: 40px 0 0 100px;
  }
  .answer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .ifsuccess {
    width: 100px;
    height: 36px;
    background: #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .successicon {
    background: green;
    color: #fff;
  }
}
</style>
